import React from 'react';
import { Modal, Form, Input, Row, Col, Select, InputNumber } from 'antd';
// import {
//   FILEDSTATUS
// } from 'configs/constants';
// import { isEmpty } from 'utils/share';
// import { 
//   AutoSearch
// } from 'components/common';
// import { 
//   getList as getCList
// } from 'services/company';
// import { 
//   getList as getUList
//  } from 'services/user';
// import { mobile } from 'configs/rules';
// import InputNumberGroup from 'components/common/InputNumberGroup';
// import moment from 'moment';



const FormItem = Form.Item;
const Option = Select.Option;


class AddModal extends React.Component {
  constructor (props) {
    super(props);
    this.state = {};
    this.onOK = this.onOK.bind(this);
  }

  componentDidMount(){
    const { record, queryDataTemplateItems } = this.props;
    const { id } = record || {};
    if(id){
      queryDataTemplateItems({ dataTemplateId: id });
    }
  }

  onOK () {
    const { onOK, form, onCancel, record, getList, row } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        // values.initTime = values.initTime ? moment(values.initTime).format(ymd) : undefined;
        onOK({ ...values, dataTemplateId: record.id, id: row.id }).then(() => {
          onCancel();
          getList({ dataTemplateId: record.id });
        });
      }
    });
  }

  render () {
    const { onCancel, form, loading, record = {},
    templateList, typeList, row } = this.props;
    const { getFieldDecorator } = form;
    const modalOpts = {
      confirmLoading: loading,
      title: `${row.id ? '编辑' : '新增'}设备触发字段`,
      width: 850,
      visible: true,
      maskClosable: false,
      okText: '确定',
      cancelText: '取消',
      onOk: this.onOK,
      onCancel
    };
    const formItemLayout = {
      labelCol: {
        span: 7
      },
      wrapperCol: {
        span: 15
      }
    };
    console.log(record, row);
    
    return (
      <Modal {...modalOpts}>
        <Form>
          <Row>
            <Col span="12">
              <FormItem
                label='模版名称'
                {...formItemLayout}
            >
                {
                getFieldDecorator('name', {
                  initialValue: record.name || '',
                  rules: [{ required: true, message: '请填写模版名称' }]
                })(
                  <Input
                    maxLength={30}
                    placeholder='模版名称'
                    disabled
                  />
                )
              }
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem
                label='监控字段'
                {...formItemLayout}
            >
                {
                getFieldDecorator('dataTemplateItemId', {
                  initialValue: row.dataTemplateItemId || undefined,
                  rules: [{ required: true, message: '请填写监控字段' }]
                })(
                  <Select
                    placeholder='请选择监控字段'
                  >
                    {
                    templateList.map((item, key) => 
                      <Option value={item.id} key={key}>{item.name}</Option>)
                    }
                  </Select>
                )
              }
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem
                label='监控类型'
                {...formItemLayout}
            >
                {
                getFieldDecorator('type', {
                  initialValue: row.type || undefined,
                  rules: [{ required: true, message: '请填写监控字段' }]
                })(
                  <Select
                    placeholder='请选择监控字段'
                  >
                    {
                    typeList.map((item, key) => 
                      <Option value={item.key} key={key}>{item.val}</Option>)
                    }
                  </Select>
                )
              }
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem
                label='值范围'
                {...formItemLayout}
                required
            >
                <Col span="12">
                  <FormItem
                  >
                    {
                      getFieldDecorator('limitA', {
                        initialValue: row.limitA || '',
                        rules: [{ required: true, message: '请填写字段A' }]
                      })(
                        <InputNumber
                          maxLength={30}
                          placeholder='字段A'
                        />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem
                  >
                    {
                      getFieldDecorator('limitB', {
                        initialValue: row.limitB || '',
                        rules: [{ required: true, message: '请填写字段B' }]
                      })(
                        <InputNumber
                          maxLength={30}
                          placeholder='字段B'
                        />
                      )
                    }
                  </FormItem>
                </Col>
              </FormItem>
            </Col>

          </Row>
          {/* <Row>
            <Col span="12">
              <FormItem
                label='状态'
                {...formItemLayout}
              >
                {
                getFieldDecorator('onlineStatus', {
                  initialValue: !isEmpty(record.status) ? `${record.status}` : undefined,
                  rules: [
                    { required: true, message: '状态不能为空' }
                  ]
                })(
                  <Select
                    placeholder='请选择状态'
                  >
                    {
                    Object.keys(FILEDSTATUS).map((item, key) => 
                      <Option value={item} key={item}>{FILEDSTATUS[item]}</Option>)
                    }
                  </Select>
                )
              }
              </FormItem> 
            </Col>
          </Row> */}
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(AddModal);
